<template>
  <div class="nav_main">
    <div>      
      <ul class="nav">
        <li class="item">
          <router-link class="link" to="/"
            ><i class="el-icon-s-home"></i>首页</router-link
          >
        </li>
        <li class="item">
          <router-link class="link" to="/pager1"><i class="el-icon-menu"></i>测试页面1</router-link>
        </li>
        <li class="item">
          <router-link class="link" to="/pager2"><i class="el-icon-folder"></i>测试页面2</router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.nav_main {
  width: 300px;
}

.nav {
  position: relative;
}

.nav .item {
  height: 38px;
  line-height: 38px;
  text-align: left;
  padding: 0 15px;
}

.nav .item:hover {
  background: rgb(64, 158, 255);
  cursor: pointer;
}
.nav .item i {
  color: #ffffff;
  font-size: 18px;
  margin-right: 8px;
}

 a.link {
  font-size: 18px;
  color: #ffffff;
  display: block;
  width: 100%;
  height: 30px;
}

::v-deep .el-submenu__title {
  color: #ffffff;
}

::v-deep .el-submenu__title:hover {
  background-color: #ecf5ff;
  color: rgb(64, 158, 255);
}

::v-deep .el-submenu__title:hover i {
  color: rgb(64, 158, 255);
}

::v-deep .el-menu-item:hover {
  background-color: #ecf5ff;
  color: rgb(64, 158, 255);
}

::v-deep .el-menu-item:hover i {
  background-color: #ecf5ff;
  color: rgb(64, 158, 255);
}
</style>